<template>
	<view class="feedback">
		<view class="content">
			<view class="feedback-info">
				<uniForms class="form">
					<formListItem
						class="feedback-type-slc"
						placeholder="请选择"
						:label="'反馈类型'"
						:label-width="130"
						:input-text-align="'right'"
						:type="'selector'"
						:picker-list="typePickerList"
						:arrow-show="true"
						:value.sync="feedbackType"
					></formListItem>
					<formListItem class="feedback-textarea" type="textarea" :label-width="150" :placeholder="'请输入反馈信息'" :value.sync="feedbackContent"></formListItem>
				</uniForms>
			</view>

			<!-- <view class="imgUpload">
				<htz-image-upload
					:max="3"
					:choose-num="3"
					:name="'file'"
					v-model="uploadFileList"
					:uploadSuccess="uploadSuccess"
					:headers="{
						'Content-type': 'multipart/form-data',
						'jp-bookstore-token': token
					}"
					:formData="{}"
					:action="HOST + '/common/upload'"
				></htz-image-upload>
			</view> -->

			<view class="contact-way">
				<uniForms class="form">
					<formListItem class="input" type="text" :label-width="150" :placeholder="'手机/邮箱/QQ (选填)'" :value.sync="contactWay"></formListItem>
				</uniForms>
			</view>
		</view>

		<view class="detail-tools"><button class="btn btn-orange submit" @click="submit">发布评价</button></view>
	</view>
</template>

<script>
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
import uniForms from '@/components/uni-forms/uni-forms.vue';
import formListItem from '@/components/form-list-item/form-list-item.vue';

export default {
	components: {
		htzImageUpload,
		uniForms,
		formListItem
	},
	data() {
		return {
			HOST: this.$HOST,
			token: uni.getStorageSync('token') || '',
			imgHost: this.$imgHost,
			feedbackType: '', //反馈类型
			contactWay: '', //联系方式
			typePickerList: [
				{
					label: '商品相关',
					value: '商品相关'
				},
				{
					label: '物流状况',
					value: '物流状况'
				},
				{
					label: '客户服务',
					value: '客户服务'
				},
				{
					label: '优惠活动',
					value: '优惠活动'
				},
				{
					label: '产品体验',
					value: '产品体验'
				},
				{
					label: '产品功能',
					value: '产品功能'
				},
				{
					label: '其它问题',
					value: '其它问题'
				}
			],
			feedbackContent: '', //反馈内容
			uploadFileList: [
				// {
				// 	fileName	:	/profile/wechat/8ab50454-54b2-4a19-8032-e2a7c9bfb78c.jpg
				// 	url	:	http://10.18.0.35:8081/wx-dev-api/profile/wechat/8ab50454-54b2-4a19-8032-e2a7c9bfb78c.jpg
				// }
			] //上传文件列表
		};
	},
	computed: {},
	watch: {
		// '$store.state.aftersaleModule.aftersaleOrderInfo': function(newVal, oldVal) {
		// 	console.log('orderInfo改变', newVal);
		// 	this.orderInfo = newVal;
		// }
	},
	methods: {
		uploadSuccess(res) {
			// 上传成功
			console.log('上传成功', res);
		},
		verification() {
			// 验证
			if (!this.feedbackType || this.feedbackType == '') {
				uni.showToast({
					icon: 'none',
					mask: true,
					duration: 2000,
					title: '请选择反馈类型！'
				});
				return false;
			} else if (!this.feedbackContent || this.feedbackContent == '') {
				uni.showToast({
					icon: 'none',
					mask: true,
					duration: 2000,
					title: '请输入反馈信息！'
				});
				return false;
			} else {
				return true;
			}
		},
		submit() {
			if(this.verification())
			this.$store
				.dispatch('addFeedback', {
					feedbackType: this.feedbackType,
					feedbackContent: this.feedbackContent,
					contact: this.contactWay,
					feedbackPic: this.uploadFileList
						.map(item => {
							return item.fileName;
						})
						.toString()
				})
				.then(res => {
					
					setTimeout(()=>{
						uni.showToast({
							mask: true,
							icon: 'success',
							title: '发布成功',
							duration: 2000
						});
					},500)
					
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				});
		}
	},
	onLoad(option) {}
};
</script>

<style lang="scss" scoped>
.feedback {
	.content {
		padding: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 100rpx;
	}

	.feedback-info {
		margin-top: 20rpx;
		border-radius: 6px;
		background-color: #fff;
		.form {
			// display: flex;
			// flex-direction: column;
			::v-deep.feedback-type-slc {
				display: block;
				margin-bottom: 20rpx;
				.uni-forms-item__label {
					font-size: 32rpx;
					color: #1b1b1b;
					font-weight: bolder;
				}
				.value-text {
					padding: 12rpx 0px !important;
					font-size: 32rpx !important;
				}
			}

			::v-deep.feedback-textarea {
				display: block;
				background-color: #f5f5f6;
				border-radius: 6px;
				.uni-forms-item {
					background-color: transparent;
				}
				.uni-easyinput {
					background-color: #f5f5f6;
					border-radius: 6px;
				}
			}

			border-radius: 6px;
			/* #ifdef H5 */
			padding: 20rpx;
			/* #endif */
			/* #ifdef MP */
			::v-deep.uni-forms {
				padding: 20rpx !important;
			}
			/* #endif */
		}
	}
	.contact-way {
		margin-top: 20rpx;
		border-radius: 6px;
		background-color: #fff;
		.form {
			border-radius: 6px;
			/* #ifdef H5 */
			padding: 10rpx 20rpx;
			/* #endif */
			/* #ifdef MP */
			::v-deep.uni-forms {
				padding: 10rpx 20rpx !important;
			}
			/* #endif */
		}
	}
	.detail-tools {
		.submit {
			padding: 14rpx 100rpx;
		}
	}

	.imgUpload {
		background-color: #ffffff;
	}
}
</style>
